<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <style>
        .search-input {
            z-index: 1;
            position: relative;
            width: 200px;
        }

        .search-input__input {
            width: 100%;
        }

        .suggestion__item {
            display: flex;
            padding: 3px 12px;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .suggestion__item:hover {
            background: #f1f1f1;
            border-color: #f1f1f1;
        }

        .suggestion__item .image {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            object-fit: cover;
        }

        .search-input__suggestion {
            position: absolute;
            left: 0;
            top: 30px;
            right: 0;
            box-shadow: 0 0 2px 4px #f1f1f1;
            border: 1px solid #f1f1f1;
        }
    </style>
</head>
<body>
<div class="search-input">
    <input class="search-input__input" placeholder="请输入"/>
    <div class="search-input__suggestion">
    </div>
</div>

<script src="lib/jquery-3.5.1.js"></script>
<script>
    var data = [
        {
            "userId": "b8a0f364-17ce-45f4-9ec1-f4c1cfbca955",
            "talentId": "19f2079e-e3f7-49de-b085-0280e6047acc",
            "nickName": "labbor",
            "headImgUrl": "https://cos.sxkid.com/images/user/b8a0f364-17ce-45f4-9ec1-f4c1cfbca955/28b7a16d-f586-4cc0-8b9a-97ed32db8587_s.jpg"
        },
        {
            "userId": "fcbb302a-097d-4664-89e3-b659f8d62b92",
            "talentId": "0f149d0e-8e90-4a16-bad2-171c12dc715b",
            "nickName": "lion",
            "headImgUrl": "https://cos.sxkid.com/images/user/fcbb302a-097d-4664-89e3-b659f8d62b92/f3bb2838-5d2d-4ba7-a8c1-7f5b5b5006ce_s.jpg"
        }
    ];

    function getData(keyword) {
        return data.map(s => {
            return {
                id: s.talentId,
                text: s.nickName,
                imageUrl: s.headImgUrl
            }
        });
    }

    function getSuggestionItemHtml(item) {
        return `<div class="suggestion__item search-input__template" data-id="${item.id}" data-text="${item.text}">
                        <img class="image" src="${item.imageUrl}" />
                        <div class="text">${item.text}</div>
                    </div>`;
    }

    $('.search-input').on('click', '.suggestion__item',function (e) {
        let $this = $(this);
        let data = $this.data();
        $('.search-input__input').val(data.text)
        $('.search-input__input').data('id', data.id)
    })

    $('.search-input__input').on('input', function (e) {
        suggestion();
    })

    $('.search-input').on('blur', function (e) {
        hideSuggestion();
    })

    $('.search-input__input').on('focus', function (e) {
        suggestion();
    })

    function suggestion() {
        let keyword = $('.search-input__input').val();
        let data = getData(keyword);
        renderData(data);
    }

    function renderData(data) {
        if (!data) return;

        let length = data.length, $suggestion = $('.search-input__suggestion');
        let templateHtml = '';
        for (let i = 0; i < length; i++) {
            let item = data[i];
            templateHtml += getSuggestionItemHtml(item);
        }
        $suggestion.empty();
        $suggestion.append(templateHtml);

        //展示搜索框
        if (length > 0) {
            showSuggestion();
        } else {
            hideSuggestion();
        }
    }

    function showSuggestion() {
        $('.search-input__suggestion').show();
    }

    function hideSuggestion() {
        $('.search-input__suggestion').hide();
    }
</script>
</body>
</html>